<template>
  <div id="app">
    <!-- 自定义标题栏 -->
    <TitleBar/>
    <el-container class="layout-container">
      <el-main class="app-main">
        <el-tabs v-model="activeTab" type="border-card">
          <el-tab-pane label="公式编辑" name="editor">
            <FormulaEditor/>
          </el-tab-pane>
          <el-tab-pane label="公式库" name="library">
            <FormulaLibrary/>
          </el-tab-pane>
        </el-tabs>
      </el-main>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import {ref} from 'vue';
import TitleBar from './components/TitleBar.vue'
import FormulaEditor from './components/FormulaEditor.vue';
import FormulaLibrary from './components/FormulaLibrary.vue';

const activeTab = ref('editor')
</script>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#app {
  height: 100vh;
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB',
  'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
}

.layout-container {
  height: calc(100vh - 40px); /* 减去标题栏高度 */
}

.app-main {
  padding: 0; /* 移除内边距，让标签页充满 */
  background-color: #f5f7fa;
}

/* 隐藏默认的窗口标题栏 */
:root {
  --electron-title-bar-height: 40px;
}
</style>
